<template>
  <div class="card-wrap">
    <div class="card-item">
      <div
        v-for="(item,index) in numList"
        class="card"
      >
        <div class="card-number">
          <div class="div1">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
          </div>
        </div>
        <span class="dh" v-if="index%3===0 && index!==0">，</span>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  name: "card",
  data() {
    return {
      numList: [2, 3, 7, 8, 1,8,4,9],
    }

  },
  methods: {
    timer() {
      let div1 = document.getElementsByClassName("div1");
      console.log("div1===>", div1)
      this.numList.forEach((item, index) => {
        // console.log(div1[index]);
        let h = 0
        let jsq = setInterval(() => {
          if (h === -(item * 80)) {
            clearInterval(jsq)
            return
          }
          h -= 80
          div1[index].style.transform = "translateY(" + h + "px)";//style.样式名=样式值;
        }, 3)

      })
    }
  },
  mounted() {
    this.numList=this.numList.reverse()
    this.timer()
  }
}
</script>

<style scoped lang="scss">
* {
  list-style: none;
  padding: 0;
  margin: 0
}

.card-wrap {
  width: 800px;
  height: 80px;
  margin-top: 300px;
  margin-left: 300px;

  .card-item {
    height: 80px;
    text-align: center;
    display: flex;
    flex-direction: row-reverse;
    overflow: hidden;

    .card{
      display: flex;
      .card-number {
        width: 70px;
        height: 80px;
        font-size: 80px;
        color: #000;
        background-color: pink;
        margin-right: 10px;
      }

      .card-number > div {
        text-align: center;
        width: 70px;
        height: 80px;
        line-height: 80px;
      }
      .dh{
        font-size: 30px;
        transform: translateY(30px);

      }
    }

  }
}
</style>
